<template>
	<view class="u-page">
		<!-- top -->
		<view class="top_img_box">
			<!-- <u-swiper :list="swiperList" height="300"></u-swiper> -->
			<image src="/static/header_img.png" mode='widthFix' alt="" />
		</view>
		<!-- 号卡爆品 -->
		<view class="shop_home_container">


			<!-- middle -->
			<view class="shop_middle_box">
				<view class="middle_title">
					<img src="/static/img_title_left.png" alt="" />
					<span>爆款套餐</span>
					<img src="/static/img_title_right.png" alt="" />
				</view>
				<view class="middle_tab">
					<view
						class="middle_all"
						v-for="(item, index) in tabList"
						:key="item.id"
						:class="[tabCurrent == item.id ? 'middle_all_active' : '']"
						@click="changeTab(item, index)"
					>
						<view class="middle_all_img">
							<img :src="item.img" alt="" />
						</view>
						<view class="middle_all_name">
							{{ item.name }}
						</view>
						<!-- <view class="middle_line"></view> -->
					</view>
				</view>
			</view>

			<!-- 套餐详情 -->
			<view class="home_package_box" v-for="(item, index) in packageList" :key="index + 1">
				<view class="home_package_all">
					<!-- top -->
					<view class="package_top_box">
						<view class="package_top_title">{{ item.name }}</view>
						<!-- <view class="package_top_check">
							详情 >
						</view> -->
					</view>

					<!-- middle -->
					<view class="package_middle_box" @click="handleShowAge(item, index)">
						<view class="package_middle_img_box">
							<image :src="imgPackageUrl.packageImgUrl + item.image" mode="" class="package_middle_img"></image>
						</view>
						<view class="package_top_img" v-if="true">
							<image src="/static/icon-top-one.png" mode="" class="top_img" v-if="index == 0"></image>
							<image src="/static/icon-top-two.png" mode="" class="top_img" v-else-if="index == 1"></image>
							<image src="/static/icon-top-three.png" mode="" class="top_img" v-else-if="index == 2"></image>
						</view>
						<view class="package_middle_con_box">
							<view class="pacakge_tip_box" v-if="item.shop_tag_ids">
								<view
									class="pacakge_tip_all"
									:style="{ color: itemTag.font_color, border: `1px solid ${itemTag.background_color}` }"
									v-for="itemTag in item.shop_tag_ids"
								>
									{{ itemTag.tag }}
								</view>
							</view>
					<!-- 		? 'package_middle_tip_three'
							: '' || indexs == 1
							? 'package_middle_tip_four'
							: '' || indexs == 2
							? 'package_middle_tip_five'
							: '' -->
							<view class="package_middle_tip_box" v-else>
								<view class="" v-for="(items, indexs) in item.channe_info" :key="indexs">
									<view
										class="package_middle_tip_one"
										:class="[
											indexs == 0
												? 'package_middle_tip_one'
												: '' || indexs == 1
												? 'package_middle_tip_two'
												: '' || indexs == 2
												? 'package_middle_tip_three'
												: '' || indexs == 3
												? 'package_middle_tip_four'
												: '' || indexs == 4
												? 'package_middle_tip_five'
												: '' || indexs == 5
												? 'package_middle_tip_six'
												: '' || indexs == 6
												? 'package_middle_tip_seven'
												: '' || indexs == 7
												? 'package_middle_tip_eight'
												: '' || indexs == 8
												? 'package_middle_tip_nine'
												: ''
										]"
									>
										{{ items }}
									</view>
								</view>
							</view>

							<!-- v-if="item.data_quota && item.call_duration" -->
							<view class="package_flow_box" v-if="item.generalized && item.directional && item.call" @click="handleShowAge(item, index)">
								<view class="package_flow">
									<view class="flow_title">{{ item.generalized }}</view>
									<view class="flow_name">通用流量</view>
								</view>

								<view class="flow_line"></view>

								<view class="package_flow">
									<view class="flow_title">{{ item.directional }}</view>
									<view class="flow_name">定向流量</view>
								</view>

								<view class="flow_line"></view>

								<view class="package_flow">
									<view class="flow_title">{{ item.call }}</view>
									<view class="flow_name">通话时长</view>
								</view>
							</view>

							<view class="package_sales">
								<span class="package_sales_title">销量：</span>
								<span>{{ item.sale_num ? item.sale_num : 0 }}</span>

							</view>
						</view>
					</view>

					<!-- 亮点-按钮 -->
					<view class="package_bright_box">
						<view class="package_bright_title">产品亮点: {{ item.yj ? item.yj : '暂无' }}</view>
						<view class="package_handle_btn" @click="handlerTransact(item)">立即办理</view>
					</view>
				</view>

				<view class="home_package_other" v-if="isShowAge == index + 1">
					<view class="handle_age_box">
						<view class="age_icon_box">
							<image src="/static/icon-card.png" mode="" class="age_icon"></image>
						</view>
						<view class="age_title">办理年龄: {{ interceptInfo.age }}岁</view>
					</view>

					<view class="handle_age_box">
						<view class="age_icon_box">
							<image src="/static/icon-address.png" mode="" class="age_icon"></image>
						</view>
						<view class="age_title">不发货地址: {{ interceptInfo.address }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<view class="custom_btn_box">
			<image src="/static/icon-custom-new.png" mode="" class="custom_btn_icon" @click="handleCustom"></image>
		</view>
	</view>
</template>

<script>
import imageUrl from '@/utils/imgUrl.js';
import provinceList from '@/utils/province.js';
export default {
	data() {
		return {
			shopTitle: '172号号卡店铺', // 店铺名字
			// 评价数组
			evaluateDataList: [
				{
					score: '4.99',
					title: '商品体验'
				},
				{
					score: '4.99',
					title: '商品体验'
				},
				{
					score: '4.99',
					title: '商品体验'
				}
			],
			tabList: [
				{
					id: 2,
					name: '中国移动',
					img:'/static/img_yidong.png'
				},
				{
					id: 3,
					name: '中国联通',
					img:'/static/img_dianxin.png'
				},
				{
					id: 1,
					name: '中国电信',
					img:'/static/img_liantong.png'
				},
				{
					id: 4,
					name: '中国广电',
					img:'/static/img_guangdian.png'
				},
				{
					id: 0,
					name: '全部',
					img:'/static/img_all.png'
				},
			],
			tabCurrent: 0,
			tabCurrents: 0,
			packageList: [],
			searchValue: '',
			showEdit: false,
			editNameValue: '',
			action: 'https://hk.saler.hkwl6688.com/api/user/uploadAvatar',
			uploadImgUrl: '', // 上传图片url
			fileListNew: [],
			personMsgObj: {},
			defaultAvatar: '/static/my/icon-default-avatar.png',
			token: uni.getStorageSync('token'),
			isShowPromotion: false, // 是否显示一键推广按钮
			userInfo: {},
			imgUploadUrl: '',
			imgPackageUrl: '',
			promotionImg: '',
			showPopup: false,
			userSahreId: '',
			showBelongingPlace: false,
			isChooseNumber: false,
			formClassify: {
				belonging_place: '',
				data_quota: 0,
				call_duration: 0,
				is_choose_number: '',
				first_recharge_amount: 0,
				monthly_rent: 0
			},
			selectNumberList: [
				{
					value: '0',
					label: '不选号'
				},
				{
					value: '1',
					label: '选号'
				}
			],
			agentId: '',
			fxuserId: '',
			packageId: '',
			level: '',
			isShowAge: null,
			agentProId: '',
			packageQueryObj: {
				belongPlace: '',
				trafficLimit: '',
				callDuration: '',
				screen: '筛选',
				firstRechargeAmount: '',
				monthlyRent: ''
			},
			showTrafficLimit: false,
			trafficLimitList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				},
				{
					value: '150-200',
					label: '150-200'
				}
			],
			showCallDuration: false,
			callDurationList: [
				{
					value: '0-300',
					label: '0-300'
				},
				{
					value: '300-500',
					label: '300-500'
				},
				{
					value: '500-1000',
					label: '500-1000'
				}
			],
			showFirstRecharge: false,
			firstRechargeList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				}
			],
			showMonthlyRent: false,
			monthlyRentList: [
				{
					value: '0-50',
					label: '0-50'
				},
				{
					value: '50-100',
					label: '50-100'
				},
				{
					value: '100-150',
					label: '100-150'
				}
			],
			belongingPlaceList: [],
			formClassify: {
				belonging_place: '',
				data_quota: null,
				call_duration: null,
				is_choose_number: '',
				first_recharge_amount: null,
				monthly_rent: null
			},
			showClassify: false,
			pageObj: {
				pageNow: 1,
				pageSize: 5
			},
			total: 0,
			swiperList: [],
			interceptInfo: {}
		};
	},
	onShow() {
		// this.getIpAddress()
		this.getUrlParams(location.href);
		this.imgPackageUrl = imageUrl;
		this.belongingPlaceList = provinceList;
		this.swiperList = [];
		this.getBanner();
		this.belongingPlaceList.forEach((item) => {
			item.value = item.code;
			item.label = item.name;
		});
	},
	onLoad(option) {},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getPackageList();
		} else if (this.pageObj.pageNow == this.total) {
			uni.showToast({
				title: '到底啦',
				icon: 'none'
			});
			return;
		}
	},
	methods: {
		// 点击客服
		handleCustom() {
			let url = 'https://work.weixin.qq.com/kfid/kfc0a39c065aaddb877';
			location.href = url;
		},

		// 获取banner
		getBanner() {
			this.$request('/getH5Lb', {}, 'POST').then((res) => {
				if (res.code == 1) {
					res.data.newlb.forEach((item) => {
						if (item.img) {
							item.newImg = 'https://landing.zibojinchi.com/' + item.img;
						}
						this.swiperList.push(item.newImg);
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},
		// ip定位
		getIpAddress() {
			const that = this;
			uni.request({
				url: 'https://information.flow.haokazhijia.net/api/getQqIp',
				method: 'POST',
				success: (res) => {
					// this.city = res.data.result.ad_info.province + '-' + res.data.result.ad_info.city +
					// 	'-' + res.data.result.ad_info.district
					this.packageQueryObj.belongPlace = res.data.result.ad_info.province;
					this.getUrlParams(location.href);
				}
			});
		},

		// 获取办理年龄和不发货地址
		getH5InterceptInfo(val) {
			this.$request(
				'/getH5InterceptInfo',
				{
					package_id: val.id
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					this.interceptInfo = res.data.interceptInfo;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 首充金额确定
		confirmFirstRecharge(e) {
			this.packageQueryObj.firstRechargeAmount = e[0].value;
		},

		// 首充金额显示下拉
		handleChooseFirstRecharge() {
			this.showFirstRecharge = true;
		},

		// 月租确定
		confirmMonthlyRent(e) {
			this.packageQueryObj.monthlyRent = e[0].value;
		},

		// 月租显示下拉
		handleChooseMonth() {
			this.showMonthlyRent = true;
		},

		// 分类弹窗-重置
		handleRefresh() {
			// this.packageQueryObj.belongPlace = ''
			// this.packageQueryObj.trafficLimit = ''
			// this.packageQueryObj.callDuration = ''
			this.packageQueryObj.firstRechargeAmount = '';
			this.packageQueryObj.monthlyRent = '';
			this.showClassify = false;
			this.getPackageList();
		},
		// 分类弹窗-确定
		handleSureClassify() {
			this.getPackageList();
			this.showClassify = false;
		},
		// 可否选号确定
		confirmChooseNumber(e) {
			this.formClassify.is_choose_number = e[0].label;
		},
		// 选择归属地
		handleBelong() {
			this.showBelongingPlace = true;
		},
		// 选择流量额度
		handleTraffic() {
			this.showTrafficLimit = true;
		},

		// 选择通话时长
		handleCallDuration() {
			this.showCallDuration = true;
		},
		// 点击分类浮动按钮
		handleClassify() {
			this.showClassify = true;
		},

		// 选择归属地确定
		confirmBelonging(e) {
			this.formClassify.belonging_place = e[0].label;
			this.packageQueryObj.belongPlace = e[0].label;
			this.getPackageList();
		},

		// 选择归属地取消
		cancelBelonging(e) {
			this.packageQueryObj.belongPlace = '';
			this.getPackageList();
		},

		// 选择流量额度确定
		confirmTrafficLimit(e) {
			this.packageQueryObj.trafficLimit = e[0].value;
			this.getPackageList();
		},

		// 选择流量额度确定
		cancelTrafficLimit(e) {
			this.packageQueryObj.trafficLimit = '';
			this.getPackageList();
		},

		// 选择通话时长确定
		confirmCallDuration(e) {
			this.packageQueryObj.callDuration = e[0].value;
			this.getPackageList();
		},

		// 选择通话时长取消
		cancelCallDuration(e) {
			this.packageQueryObj.callDuration = '';
			this.getPackageList();
		},

		getUrlParams(url) {
			const that = this;
			// 通过 ? 分割获取后面的参数字符串
			let urlStr = url.split('?')[1];
			if (urlStr) {
				// 创建空对象存储参数
				let obj = {};
				// 再通过 & 将每一个参数单独分割出来
				let paramsArr = urlStr.split('&');
				for (let i = 0, len = paramsArr.length; i < len; i++) {
					// 再通过 = 将每一个参数分割为 key:value 的形式
					let arr = paramsArr[i].split('=');
					obj[arr[0]] = arr[1];
				}
				that.agentId = obj.agent_id;
				that.fxuserId = obj.fxuser_id ? obj.fxuser_id : '';
				that.packageId = obj.package_id;
				that.level = obj.level;
				that.agentProId = obj.agent_pro_id;

				let objNew = {
					agent_id: that.agentId,
					fxuser_id: that.fxuserId,
					package_id: that.packageId,
					level: that.level,
					agent_pro_id: that.agentProId
				};

				uni.setStorageSync('userPackageInfo', objNew);
				that.packageList = [];
				this.getPackageList();
				return obj;
			} else {
				that.packageList = [];
				this.getPackageList();
			}
		},
		// 截取url的参数 end
		// 获取套餐列表
		getPackageList() {
			this.$request(
				'/getH5ManyPackage',
				{
					type: this.tabCurrent,
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					this.packageList = res.data.packageList;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 切换tab
		changeTab(item, index) {
			this.tabCurrent = item.id;
			this.pageObj.pageNow = 1;
			this.packageList = [];
			this.getPackageList();
		},

		handleShowAge(item, index) {
			this.getH5InterceptInfo(item);
			if (!this.isShowAge) {
				this.isShowAge = index + 1;
			} else {
				this.isShowAge = null;
			}
		},

		// 立即办理
		handlerTransact(val) {
			const packageId = encodeURIComponent(JSON.stringify(val.id))
			uni.navigateTo({
				url: '/pages/index/queryDetail?package_id=' +packageId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-page{
	min-height: 100vh;
	background-color: #f4f4f4;
	padding-top: 18rpx;
	padding-bottom: 16rpx;
}
.custom_btn_box {
	position: fixed;
	right: 0;
	bottom: 160rpx;
	.custom_btn_icon {
		width: 80px;
		height: 80px;
	}
}

.top_img_box {
	width: 100%;
	image{
		width: 100%;
	}
}

.shop_home_container {
	padding: 0rpx 21rpx 0;



	.shop_top_box {
		background: #fff;
		box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
		border-radius: 12rpx;
		padding: 31rpx 0 36rpx 26rpx;

		.top_introduce_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
			padding-bottom: 38rpx;

			.left_box {
				display: flex;
				align-items: center;

				.avatar_box {
					width: 90rpx;
					height: 90rpx;
					margin-right: 32rpx;
					box-shadow: 0px 12px 40px 17px rgba(172, 168, 168, 0.06);

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}

				.title_box {
					.top_title_box {
						display: flex;
						align-items: center;
						width: 240rpx;
						padding-bottom: 18rpx;

						.top_title {
							height: 40rpx;
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding-right: 16rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.top_icon_box {
							width: 32rpx;
							height: 32rpx;
							background: linear-gradient(180deg, #89b3ff, #4c8bff);
							border-radius: 10rpx;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #ffffff;
							text-align: center;
							line-height: 32rpx;
						}
					}

					.tip_box {
						display: flex;
						align-items: center;

						.tip_icon_box {
							width: 30rpx;
							height: 30rpx;
							margin-right: 13rpx;

							.tip_icon {
								width: 100%;
								height: 100%;
							}
						}

						.tip_title_box {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #f2b032;

							.tip_line {
								width: 1px;
								height: 17rpx;
								background: #f5c976;
								margin: 0 20rpx;
							}
						}
					}
				}
			}

			.right_box {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.promotion_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 177rpx;
					height: 48rpx;
					opacity: 1;
					border-radius: 160rpx 0px 0px 160rpx;
					background: #d9e8ff;
					margin-bottom: 18rpx;

					.promotion_title {
						font-size: 22rpx;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 48rpx;
						color: #4f96ff;
						padding-right: 10rpx;
					}

					.promotion_img_box {
						width: 40rpx;
						height: 40rpx;

						.promotion_img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.sell_box {
					width: 177rpx;
					height: 45rpx;
					background: #ffeded;
					border-radius: 23rpx 0px 0px 23rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fc3838;
					text-align: center;
					line-height: 45rpx;
				}
			}
		}

		.top_options_box {
			padding: 28rpx 21rpx 35rpx 0;

			.options_title_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left_box {
					display: flex;
					align-items: center;

					.options_title {
						font-size: 34rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						padding-right: 23rpx;
					}

					.options_score {
						font-size: 46rpx;
						font-family: my-font;
						font-weight: bold;
						color: #fc3838;
					}
				}

				.right_box {
					display: flex;
					align-items: center;

					.options_star {
					}

					.option_exceed {
						font-size: 24rpx;
						font-family: my-font;
						font-weight: 400;
						color: #333333;
						padding-left: 27rpx;
					}
				}
			}

			.options_evaluate_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding: 39rpx 0;

				.options_evaluate_all {
					position: relative;

					.evaluate_img_box {
						width: 207rpx;
						height: 92rpx;

						.evaluate_img {
							width: 100%;
							height: 100%;
						}
					}

					.evaluate_high {
						position: absolute;
						top: 4rpx;
						left: 10rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fc3838;
					}

					.evaluate_data_box {
						position: absolute;
						top: 6rpx;
						left: 70rpx;

						.data_num {
							font-size: 34rpx;
							font-family: my-font;
							font-weight: bold;
							color: #4d4d4d;
							padding-bottom: 6rpx;
						}

						.data_title {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #808080;
						}
					}
				}
			}
		}

		.top_money_box {
			padding: 0 20rpx 0 0;

			.merchant_qualification_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 31rpx;

				.left_box {
					display: flex;
					align-items: center;

					.merchant_icon_box {
						width: 32rpx;
						height: 32rpx;
						margin-right: 17rpx;

						.merchant_icon {
							width: 100%;
							height: 100%;
						}
					}

					.merchant_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4d4d4d;
					}
				}

				.right_box {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}
			}

			.earnest_money_box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left_box {
					display: flex;
					align-items: center;

					.earnest_icon_box {
						width: 32rpx;
						height: 32rpx;
						margin-right: 17rpx;

						.earnest_icon {
							width: 100%;
							height: 100%;
						}
					}

					.earnest_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4d4d4d;
					}
				}

				.right_box {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #808080;
				}
			}
		}
	}

	.shop_middle_box {
		background: #ffffff;
		border: 1px solid #f6f6f6;
		box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
		border-radius: 12rpx;
		// padding-top: 22rpx;
		margin-top: 17rpx;

		.middle_title {
			height: 69rpx;
			background-color: #FCFCFC;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: MiSans;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 34px;
			span{
				padding: 0 19rpx;
			}
			img{
				width: 164rpx;
				height: 18rpx;
			}
		}

		.middle_tab {
			padding-top: 27rpx;
			padding-bottom: 19rpx;
			display: flex;
			justify-content: space-around;

			.middle_all {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				color: #000;
				.middle_all_img{
					display: flex;
					align-items: center;
					width: 82rpx;
					height: 82rpx;
					img{
						width: 100%;
						height: 100%;
					}
				}

				.middle_all_name{
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}

				.middle_line {
					width: 30rpx;
					height: 4rpx;
					border-radius: 30rpx;
					background: transparent;
					margin-top: 6rpx;
				}
			}

			.middle_all_active {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 32rpx;
				color: #4c8bff;

				.middle_line {
					width: 30rpx;
					height: 4rpx;
					border-radius: 30rpx;
					background: #4c8bff;
					margin-top: 6rpx;
				}
			}
		}
	}

	.home_package_box {
		margin-top: 15rpx;
		position: relative;
		background: #ffffff;
		box-shadow: 0px 6rpx 6rpx 1px #ececec;
		border-radius: 16rpx;
		border: 1px solid #f5f5f5;
		margin-bottom: 12rpx;
		padding: 25rpx 21rpx 18rpx 22rpx;

		.home_package_all {
			.package_top_box {
				display: flex;
				justify-content: space-between;
				padding-bottom: 26rpx;

				.package_top_title {
					// width: 520rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #262626;
				}

				.package_top_check {
					width: 100rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #808080;
				}
			}

			.package_middle_box {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				position: relative;

				.package_middle_img_box {
					width: 212rpx;
					height: 212rpx;

					.package_middle_img {
						width: 100%;
						height: 100%;
					}
				}

				.package_top_img {
					position: absolute;
					top: 0;
					left: 10rpx;

					.top_img {
						width: 40rpx;
						height: 54rpx;
					}
				}

				.package_middle_con_box {
					width: 409rpx;

					.pacakge_tip_box {
						display: flex;
						flex-wrap: wrap;
						padding: 10rpx 0 30rpx;

						.pacakge_tip_all {
							padding: 0 6rpx;
							border-radius: 6rpx;
							margin: 0 6rpx 6rpx 0;
							font-size: 24rpx;
						}

						.package_tip_free {
							background: #ffe8d6;
							color: #ff7b0c;
							font-size: 24rpx;
							padding: 3rpx 4rpx;
							margin-right: 20rpx;
						}

						.package_tip_official {
							background: #e4ffe8;
							color: #2fc247;
							font-size: 24rpx;
							padding: 3rpx 4rpx;
						}
					}

					.package_flow_box {
						display: flex;
						align-items: center;

						.package_flow {
							width: 119rpx;
							display: flex;
							flex-direction: column;
							align-items: center;

							.flow_title {
								font-family: Source Han Sans CN;
								font-weight: bold;
								font-size: 27rpx;
								color: #262626;
							}

							.flow_name {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 22rpx;
								color: #808080;
							}
						}


						.flow_line {
							width: 2rpx;
							height: 31rpx;
							background: #e6e6e6;
							border: 2rpx solid #e6e6e6;
							// margin: 0 28rpx;
						}
					}

					.package_sales {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-style: 29rpx;
						// font-weight: 550;
						color: #333333;
						padding-top: 10rpx;
						color: #FF2728;
						.package_sales_title{
							font-size: 23rpx;
							font-weight: 400;
						}
					}

					.package_middle_tip_box {
						display: flex;
						flex-wrap: wrap;
						padding: 10rpx 0 20rpx;

						.package_middle_tip_one {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #37b6ff;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #37b6ff;
							margin-right: 19rpx;
							// margin: 0 19rpx 17rpx 0;
						}

						.package_middle_tip_two {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #5b67ca;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #5b67ca;
							margin-right: 19rpx;
						}

						.package_middle_tip_three {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							padding: 0 3rpx;
							border-radius: 6rpx;
							border: 1px solid #cc322e;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #cc322e;
							margin-right: 19rpx;
						}

						.package_middle_tip_four {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #438064;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #438064;
							margin-right: 19rpx;
						}

						.package_middle_tip_five {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #cc9f53;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #c38d23;
							margin-right: 19rpx;
						}
						.package_middle_tip_six {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #00aa7f;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #00aa7f;
							margin-right: 19rpx;
						}
						.package_middle_tip_seven {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #0000ff;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #0000ff;
							margin-right: 19rpx;
						}
						.package_middle_tip_eight {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #ffaaff;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffaaff;
							margin-right: 19rpx;
						}
						.package_middle_tip_nine {
							margin: 2rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							min-width: 111rpx;
							height: 32rpx;
							border-radius: 6rpx;
							border: 1px solid #ff00ff;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #ff00ff;
							margin-right: 19rpx;
						}
					}

					.package_middle_introduce_all {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						padding-top: 34rpx;

						.package_middle_introduce_box {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.package_middle_introduce_num {
								font-family: Source Han Sans CN;
								font-weight: bold;
								font-size: 29rpx;
								color: #262626;
							}

							.package_middle_introduce_title {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #808080;
							}
						}

						.package_middle_introduce_line {
							width: 2rpx;
							height: 31rpx;
							background: #e61b15;
							border: 2rpx solid #e6e6e6;
						}
					}
				}
			}

			.package_bright_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 0 0;

				.package_bright_title {
					width: 446rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #4d4d4d;
				}

				.package_handle_btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 48rpx;
					background: linear-gradient(179deg, #ff6d6e, #ff1d1f);
					box-shadow: 0px 9rpx 5rpx 0px rgba(255, 213, 213, 0.64);
					border-radius: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 27rpx;
					color: #ffffff;
				}
			}
		}

		.home_package_other {
			padding-top: 16rpx;
			margin-top: 26rpx;
			border-top: 1px solid #f5f5f5;

			.handle_age_box:last-child {
				padding-bottom: 0;
			}

			.handle_age_box {
				display: flex;
				padding-bottom: 17rpx;

				.age_icon_box {
					width: 26rpx;
					height: 26rpx;
					margin-right: 15rpx;

					.age_icon {
						width: 100%;
						height: 100%;
					}
				}

				.age_title {
					width: 632rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}
		}
	}
}
</style>
